<template>
  <div class="header-container">
      <div class="left-content">
        <CollapseBtn/>
        <BreadNav class="breadnav-box"/>
      </div>
      <div class="right-content">
        <el-tooltip  effect="dark" content="全屏模式" placement="bottom">
          <FullScreen/>
        </el-tooltip>
        <MessageBtn/>
        <User class="user-box"/>
        <el-tooltip  effect="dark" content="退出" placement="bottom">
          <ExitBtn/>
        </el-tooltip>
      </div>
  </div>
</template>

<script>
import CollapseBtn from './CollapseBtn'
import FullScreen from './FullScreen'
import ExitBtn from './ExitBtn'
import MessageBtn from './MesaageBtn'
import User from './User'
import BreadNav from '../BreadNav'
export default {
  name: 'Header',
  components:{
    CollapseBtn,FullScreen,ExitBtn,MessageBtn,User,BreadNav
  }

}
</script>

<style lang="scss">
.left-content{
  float: left;
}

.right-content{
  float: right;
}

.header-container{
  height: 50px;
  background: linear-gradient(96deg, #2B2F6C, #564779, #9D6C82);
  line-height: 50px;
  color: #fff;
}

.user-box{
  margin: 0 10px;
}

.breadnav-box{
  margin-left: 10px;
}
</style>